<template>
    <div>
        <h2 :style="{opacity}">我是News的内容</h2>
        <ol>
            <li v-for="news in newsList" :key="news.newsId">
                <!---跳转路由并携带params参数，to的字符串写法-->
                <!-- <router-link :to="`/home/news/flow/${news.newsId}/${news.newsName}`">{{news.newsName}}</router-link> -->
                 <!---跳转路由并携带params参数，to的对象写法 必须使用路由重命名-->
                <router-link :to="{
                    name:'pathveriable',
                    params:{
                        newsId:news.newsId,
                        newsName:news.newsName
                    }
                }">{{news.newsName}}</router-link>
                <input type="text" /> <!--输入框中的内容会伴随组件的切换而丢失-->
            </li>
        </ol>
        <!--展示new的内容-->
        <router-view></router-view>
    </div>
    
</template>

<script>
    export default {
        name:'News',
        data:function(){
            return {
                opacity:1,
                newsList:[
                    {newsId:'001',newsName:'newsFlow1'},
                    {newsId:'002',newsName:'newsFlow2'},
                    {newsId:'003',newsName:'newsFlow3'},
                ]
            }
        },
        // 当前组件页面挂载完成之后，开启定时器，每隔16ms改变一次透明度，此时如果使用keep-alive标签阻止组件销毁，则定时器不会被销毁，如果想要保证定时器也被停止此时需要另外两个生命周期函数
        //  mounted() {
        //     this.timer = setInterval(() => {
        //         console.log('@')
        //         this.opacity -= 0.01;
        //         if(this.opacity <= 0) this.opacity = 1;
        //     },16);
        // },
        // //当发生路由切换时，不需要展示的组件默认会被销毁，可以通过生命周期函数来验证，如果想要组件不被销毁，可以使用keep-alive标签阻止销毁
        // beforeDestroy(){
        //     console.log('News组件销毁前')
        //     clearInterval(this.timer);
        // }
        activated() {
            console.log('News组件被激活了')
                this.timer = setInterval(() => {
                console.log('@')
                this.opacity -= 0.01;
                if(this.opacity <= 0) this.opacity = 1;
            },16);
        },
        deactivated() {
            console.log('News组件失活了')
            clearInterval(this.timer);
        }
    }
</script>

<style>

</style>